<template>
  <div class="goods-list-page">
    <navigation-bar :pageName="'商品列表'" @onLeftClick="onBackClick">
      <template v-slot:nav-right>
        <img :src="layoutType.icon" @click="onChangeLayoutTypeClick()" />
      </template>
    </navigation-bar>
    <div :class="{'iphonex-bottom' : $store.state.isIphoneX}" class="goods-list-page-content">
      <!-- 筛选项 -->
      <goods-options @optionsChange="onGoodsOptionsChange"></goods-options>
      <!-- 商品列表 -->
      <goods :layoutType="layoutType.type" :sort="sortType"></goods>
    </div>
  </div>
</template>

<script>
import navigationBar from '@com/currency/NavigationBar.vue'
import goodsOptions from '@com/goods/GoodsOptions.vue'
import Goods from '@com/goods/Goods.vue'
export default {
  name: 'goodsList',
  components: {
    navigationBar,
    goodsOptions,
    Goods
  },
  data: function () {
    return {
      // goods 展示形式数据源
      layoutTypeDatas: [
        {
          // 垂直列表
          type: '1',
          icon: require('@img/list-type.svg')
        },
        {
          // 网格布局
          type: '2',
          icon: require('@img/grid-type.svg')
        },
        {
          // 瀑布流
          type: '3',
          icon: require('@img/waterfall-type.svg')
        }
      ],
      // 当前 goods 展示形式
      layoutType: {},
      // goods 排序规则
      sortType: '1'
    }
  },
  created: function () {
    this.layoutType = this.layoutTypeDatas[0]
  },
  methods: {
    onBackClick: function () {
      this.$router.go(-1)
    },
    onGoodsOptionsChange (sortType) {
      this.sortType = sortType
    },
    /**
     * 切换 goods 展示形式
     */
    onChangeLayoutTypeClick: function () {
      if (this.layoutType.type === '1') {
        this.layoutType = this.layoutTypeDatas[1]
      } else if (this.layoutType.type === '2') {
        this.layoutType = this.layoutTypeDatas[2]
      } else {
        this.layoutType = this.layoutTypeDatas[0]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@css/style.scss';
.goods-list-page {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: $bgColor;
  display: flex;
  flex-direction: column;
  &-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
</style>
